<template>
  <el-dialog
    title="新增口味"
    :visible="open"
    width="30%"
    @close="close"
  >
    <el-form
      ref="formEditRef"
      :model="form_edit"
      label-width="80px"
      :rules="rules"
    >
      <el-form-item
        v-for="(
          { form_item_json: { label, prop }, component_name, component_json },
          index
        ) in form_edit_json"
        :key="index"
        v-bind="{ label, prop }"
      >
        <component
          :is="component_name"
          v-model="form_edit[prop]"
          v-bind="component_json"
        >
          <template v-if="component_name === 'el-select'">
            <el-option
              v-for="(i, v) in component_json.option_data"
              :key="v"
              v-bind="i"
            ></el-option>
          </template>
        </component>
      </el-form-item>
    </el-form>
    <template #footer>
      <div>
        <el-button type="primary" size="mini" @click="submit">确定</el-button>
        <el-button size="mini" @click="close">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
export default {
  props: {
    open: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      rules: {
        name: [{ required: true, message: "请输入口味", trigger: "blur" }],
      },
      visible: false,
      form_edit: {
        name: "",
        price: "",
        status: "",
      },
      form_edit_json: [
        {
          form_item_json: { label: "口味", prop: "name" },
          component_name: "el-input",
          component_json: { placeholder: "口味", size: "small" },
        },
        {
          form_item_json: { label: "单价", prop: "price" },
          component_name: "el-input",
          component_json: {
            placeholder: "单价",
            size: "small",
            type: "number",
            min: 0,
          },
        },
        {
          form_item_json: { label: "状态", prop: "status" },
          component_name: "el-select",
          component_json: {
            placeholder: "状态",
            size: "small",
            option_data: [
              { label: "启用", value: 1 },
              { label: "禁用", value: 0 },
            ],
          },
        },
      ],
    };
  },
  methods: {
    handle_open() {
      this.$nextTick(() => {
        this.$refs.formEditRef.resetFields();
        this.form_edit = {
          name: "",
          price: "",
          status: "",
        };
      });
    },
    close() {
      this.$emit("close");
    },
    submit() {
      this.$refs.formEditRef.validate((callback) => {
        if (callback) {
          this.$emit("fun", this.form_edit);
          this.close();
        }
      });
    },
  },
};
</script>

<style>
</style>
